<template>
	<view class="add-circle-chat-wrap">
		<view class="content bg-white">
			<view class="textarea-content">
				<textarea placeholder="点击分享新鲜事..." class="w100" auto-height :fixed="true" maxlength="300" cursor-spacing="20"
				 :show-confirm-bar="false" v-model="form.content" confirm-type="send"></textarea>
			</view>
			<UploadGallery v-model="photos"></UploadGallery>
			<!-- <imageUpload @onUploadChange='handleChooseImage' :uploadType="'identify'" :type="'zj'"/> -->
		</view>
		<view class="select-location flex-x-between" @click="handleChooseLocation">
			<view class="left">
				<text class="iconfontPT icondingwei"></text>
				<view v-if="form.location" class="inline-block">
					<text class="" style="margin-left: 8rpx;">{{ form.location }}</text>
				</view>
				<view v-else class="inline-block">
					<text style="margin-left: 8rpx;">您的位置</text>
					<text class="gray" style="margin-left: 30rpx;">(必填，越详细越易被推荐)</text>
				</view>
			</view>
			<text class="iconfontPT iconxiayibu right"></text>
		</view>
		<view class="confirm-btn-wrap w100 bg-white">
			<button class="confirm-btn" hover-class="hoverClass" @click="handleConfirm">
				发布动态
			</button>
		</view>
	</view>
</template>

<script>
	import {
		addCircleChat
	} from '../../../apis/life-circle/index';
	import {
		identifyYellow,
	} from '../../../apis/public/index';
	import imageUpload from '../../components/public/image-upload.vue'
	import UploadGallery from '@/pages/components/public/upload-gallery.vue'

	export default {
		data() {
			return {
				photos: [],
				form: {
					location: '',
					content: ''
				},
				rules: {
					location: [{
						required: true,
						message: '请选择您的位置',
					}],
					content: [{
							required: true,
							message: '请输入动态内容',
						},
						{
							min: 2,
							max: 300,
							message: '动态内容字符长度在 2 到 300 个字符',
						}
					],
				}
			}
		},
		components: {
			imageUpload,
			UploadGallery
		},
		methods: {
			handleChooseImage(item, list) {
				this.photos = list
			},
			handleChooseLocation() {
				let _this = this
				uni.chooseLocation({
					success: function(res) {
						_this.form.location = res.address
					},
				})
			},
			handleConfirm() {
				const params = {
					content: this.form.content,
					address: this.form.location
				}
				this.photos.length && (params.img = this.photos.join())
				
				this.$verification(this.form, this.rules, ok => {
					if (ok) {
						this.$loading.show()
						addCircleChat(params).then(res => {
							if (+res.code === 200) {
								this.$loading.hide()
								uni.showToast({
									title: '操作成功！',
									icon: 'success',
									duration: 500,
								});
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.add-circle-chat-wrap {
		border-top: 1rpx solid rgba(206, 200, 200, .5);
		background: #f8f8f8;
		height: 100vh;

		.content {
			padding: 30rpx;
			box-sizing: border-box;

			.textarea-content {
				height: 400rpx;
				overflow: scroll;
				margin-bottom: 50rpx;
			}
		}

		.select-location {
			margin-top: 25rpx;
			height: 84rpx;
			font-size: 24rpx;
			background: rgba(255, 255, 255, 1);

			.left {
				margin-left: 30rpx;

				.iconfontPT {
					color: #E41805;
				}
			}

			.right {
				margin-right: 30rpx;
			}
		}

		.confirm-btn-wrap {
			position: fixed;
			bottom: 0;
			left: 0;
			box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
			height: 166rpx;

			.confirm-btn {
				width: 690rpx;
				margin-top: 15rpx;
				background: #E41805FF;
				color: #ffffff;
				font-size: 30rpx;

			}
		}
	}
</style>
